<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
      @edit="handleUpdate"
    >

      <template slot="filter-content" />

      <template slot="data-columns">

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          align="center"
          label="主联系人"
          prop="name"
        >

          <template slot-scope="scope">
            <i v-if="scope.row.isMain" class="el-icon-star-on" style="font-size: 18px; color: #e6a23c;" />
            <i v-if="!scope.row.isMain" class="el-icon-star-off" style="font-size: 18px; cursor: pointer" @click="handleMark(scope.row.id)" />
          </template>

        </el-table-column>

        <el-table-column
          align="center"
          label="姓名"
          prop="name"
        />

        <el-table-column
          align="center"
          label="邮箱"
          prop="email"
        />

        <el-table-column
          align="center"
          label="手机号"
          prop="mobile"
        />

        <el-table-column
          align="center"
          label="微信号"
          prop="wechat"
        />

        <el-table-column
          align="center"
          label="职位"
          prop="position_dictText"
        />

      </template>
    </data-table>

    <el-dialog title="管理联系人" :close-on-click-modal="false" :append-to-body="true" :visible.sync="dialogVisible" width="50%">

      <el-form ref="postForm" :model="postForm" label-position="left" :rules="rules" label-width="100px">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="postForm.name" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="postForm.mobile" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="邮箱地址">
              <el-input v-model="postForm.email" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信号" prop="wechat">
              <el-input v-model="postForm.wechat" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="职位">
              <dic-list-select v-model="postForm.position" dic-code="position" style="width: 100%" />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiSaveContacts, apiContactsDetail, apiMarkMain } from '@/api/customer/linkman'

export default {
  name: 'CustomerLinkman',
  directives: { permission },
  components: { DicListSelect, DataTable },
  props: {
    customerId: String
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '客户名称不能为空！' }
        ],
        mobile: [
          { required: true, message: '电话号码不能为空！' }
        ]
      },
      dialogVisible: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      postForm: {
        customerId: ''
      },

      options: {

        add: {
          enable: true,
          permission: ''
        },
        edit: {
          enable: true,
          permission: ''
        },
        delete: {
          enable: true,
          permission: '',
          url: '/api/customer/linkman/delete'
        },

        // 列表请求URL
        listUrl: '/api/customer/linkman/paging'
      }
    }
  },

  watch: {
    customerId: {
      handler(val) {
        this.postForm.customerId = val
        this.listQuery.params.customerId = val
      }
    }
  },

  created() {
    this.postForm.customerId = this.customerId
    this.listQuery.params.customerId = this.customerId
  },

  methods: {

    handleAdd() {
      this.postForm = { customerId: this.customerId }
      this.dialogVisible = true
    },

    handleUpdate(id) {
      apiContactsDetail(id).then(res => {
        this.dialogVisible = true
        this.postForm = res.data
      })
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        apiSaveContacts(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '联系人保存成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    },

    handleMark(id) {
      apiMarkMain({ id: id }).then(() => {
        this.$message({
          type: 'success',
          message: '主联系人修改成功!'
        })
        this.$refs.pagingTable.getList()
      })
    }
  }
}
</script>
